{extend name='table'}

{block name="style"}
<style>
    .tips {
        line-height: 24px;
        padding: 10px;
        font-size: 14px;
    }
    .operator_btn span {
        color: #008aff;
        margin-right: 10px;
        cursor: pointer;
    }
    .auth_item img {
        height: 24px;
        width: auto;
        margin-left: 20px;
    }
    .search-item {
        display: flex;
        padding: 5px 0;
    }
    .search-value span {
        cursor: pointer;
        font-size: 14px;
        color: #333;
        line-height: 26px;
        border-radius: 3px;
        display: inline-block;
        padding: 0 5px;
        margin-right: 5px;
    }
    .search-value span.active {
        background-color: #1E9FFF;
        color: #FFFFFF;
    }
    .search-value input {
        height: 30px;
    }
</style>
{/block}


{block name="content"}


<div class="layui-tab layui-tab-card">

    <div class="layui-tab-content layui-form" lay-filter="search_filter">

        <div class="layui-panel">
            <div class="tips">
                <div class="search-item">
                    <div class="search-name">{:lang('状态')}：</div>
                    <div class="search-value">
                        <span class="search_row active" data-value="">{:lang('全部')}</span>
                        {foreach $status_list as $key => $item}
                        <span class="search_row" data-value="{$key}">{$item}</span>
                        {/foreach}
                    </div>
                    <input type="hidden" id="status" name="status" value="">
                </div>
                <div class="search-item">
                    <div style="display: flex;">
                        <div class="search-name" style="line-height: 30px;">{:lang('品牌名称')}：</div>
                        <div class="search-value" style="width: 200px;">
                            <input class="layui-input" name="name" type="text">
                        </div>
                    </div>
                    <button class="layui-btn layui-btn-sm" type="button" id="search_btn" style="margin-left: 10px;background-color: #1E9FFF;border: #1E9FFF">{:lang('搜索')}</button>
                </div>
            </div>
            <table id="shop_list" lay-filter="shop_list" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
        </div>
    </div>

</div>
{/block}

{block name="script"}
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-sm" lay-event="refresh_btn" style="background-color: #ff825b;border: #ff825b;">{:lang('刷新列表')}</a>
    <!--{if auth("add")}-->
    <a class="layui-btn layui-btn-sm layui-btn-normal" data-title="{:lang('添加')}" data-area="['600px', '350px']" data-modal='{:url("add")}'>{:lang('添加')}</a>
    <!--{/if}-->
    <!--{if auth("pullBrand")}-->
    <a class="layui-btn layui-btn-sm layui-btn-normal" data-title="{:lang('同步')}" data-action='{:url("pullBrand")}'>{:lang('同步')}</a>
    <!--{/if}-->
</script>
<script type="text/html" id="operator_btn">
    <!--{if auth("edit")}-->
    <a class="layui-btn layui-btn-xs" data-title="{:lang('编辑')}" data-area="['600px', '350px']" data-modal='{:url("edit")}?id={{d.id}}'>{:lang('编辑')}</a>
    <!--{/if}-->
    <!--{if auth("delete")}-->
    <a class="layui-btn layui-btn-xs layui-btn-danger" data-confirm="{:lang('确认删除吗')}" data-title="{:lang('删除')}" data-modal='{:url("delete")}?id={{d.id}}'>{:lang('删除')}</a>
    <!--{/if}-->
</script>
<script>
    $(function() {
        // 获取页面高度
        let height = $('.layui-card-body').height();
        $('.layui-tab-content').height(height - 70);

        // 搜索
        $('#search_btn').on('click', function() {
            let data = layui.form.val('search_filter');
            data.output = 'layui.table';
            layui.table.reload('shop_list', {
                where: data
            })
        })

        // 状态筛选
        $('.search_row').on('click', function() {
            $(this).addClass('active').siblings().removeClass('active');
            $('#status').val($(this).attr('data-value'));
            let data = layui.form.val('search_filter');
            data.output = 'layui.table';
            layui.table.reload('shop_list', {
                where: data
            })
        });

        $('#shop_list').layTable({
            even: true,
            height: 'full',
            toolbar: '#toolbar',
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'name', title: '{:lang("品牌名称")}', minWidth: 100, align: 'center'},
                {field: 'value_id', title: '{:lang("品牌ID")}', minWidth: 100, align: 'center'},
                {field: 'category_name', title: '{:lang("分类")}', minWidth: 100, align: 'center'},
                {field: 'status_name', title: '{:lang("状态")}', minWidth: 100, align: 'center'},
                {field: 'creater', title: '{:lang("添加人")}', align: 'center', minWidth: 100},
                {field: 'create_at', title: '{:lang("添加时间")}', align: 'center', minWidth: 170},
                {field: 'updater', title: '{:lang("更新人")}', align: 'center', minWidth: 100},
                {field: 'update_at', title: '{:lang("更新时间")}', align: 'center', minWidth: 170},
                {toolbar: '#operator_btn', title: '{:lang("操作")}', align: 'center', minWidth: 180, fixed: 'right'}
            ]]
        });

        let table = layui.table;
        table.on('toolbar(shop_list)', function(obj) {
            if(obj.event === 'refresh_btn') {
                table.reload('shop_list');
            }
        });
    })
</script>
{/block}

